<template>
  <div>
    <div class="complexity">
      <ComplexityList :items="complexity"/>
    </div>
    <div class="task" v-if="count > 0">
      <TaskList :items="items"/>
    </div>
    <div class="task" v-else>
      <div class="no">敬请期待！</div>
    </div>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="10"
        :hide-on-single-page=true
        layout="total, prev, pager, next, jumper"
        :current-page="page"
        :total="count">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ComplexityList from '../../../components/task/complexity/List';
import TaskList from '../../../components/task/subject/List';
import { changeURLArg } from '../../../utils/url';

export default {
  name: 'Subject',
  components: {
    ComplexityList,
    TaskList,
  },
  data() {
    return {
      page: 1,
      items: [],
      count: 0,
      complexity: [
        {
          'name': '新手',
          't': 1,
          active: true
        },
        {
          'name': '入门',
          't': 2,
          active: false
        },
        {
          'name': '普通',
          't': 3,
          active: false
        },
        {
          'name': '高手',
          't': 4,
          active: false
        },
      ],
      complexity_index: 0
    };
  },
  created() {
    this.$route.query.page > 0 ? this.getImages(parseInt(this.$route.query.page)) : this.getImages();
  },
  methods: {
    handleCurrentChange(val) {
      location.href = changeURLArg(location.href, 'page', val);
      location.reload();
    },
    /**
     * 获取题目
     */
    getImages(page = 1, complexity = null) {
      this.page = page;

      this.$request.exec('get', `get_image?page=${page}&category=${this.$route.query.category}&complexity=${this.$route.query.complexity}`, null, this)
        .then((res) => {
          this.count = res.data.count;
          let data = res.data.results;
          let task = [];
          if (data.length < 10) for (let i = data.length; i < 10; i++) data[i] = {};

          task.push(data.slice(0, 5));
          task.push(data.slice(5, 10));
          this.items = task;
        })
        .catch((res) => {
          this.$message.error(res.data.msg);
        });
    },
  },
};
</script>

<style scoped>
.complexity {
  font-size: 0;
}

.task {
  font-size: 0;
  margin-top: 1.1vw;
  padding: 0 5.5vw;
}

.task .no {
  text-align: center;
  font-size: 1.1vw;
  color: #fff;
}

.pagination {
  text-align: center;
}
</style>
